<template>
    <div class="app-container">
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="标签名称：">
                <!-- “trim()”方法被用于删除输入的字符串两端的空格↓ -->
                <el-input v-model.trim="query.name" placeholder="标签名称"></el-input>
            </el-form-item>
            <el-form-item label="分类名称：">
                <!-- “clearable”属性被用于“为该下拉框添加删除（清空）按钮，删除（清空）已选中的选项”；“filterable”属性被用于“为该下拉框添加搜索功能”；此处向后台提交的是分类ID(即“categoryId”)，而非分类名称↓ -->
                <el-select v-model="query.categoryId" style="width:120px" placeholder="选择分类名称" clearable filterable>
                    <!-- 因为在此处“1”和“0”的数据类型是“数值”而非“字符串”，所以在获取数值时需要在“value”前加冒号进行数据绑定；若数据类型是“字符串”则不必加冒号↓ -->
                    <!-- <el-option label="禁用" :value="0"></el-option> -->
                    <!-- <el-option label="正常" :value="1"></el-option> -->
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
                <el-button icon="el-icon-circle-plus-outline" type="primary" @click="openDialogAndAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" :cell-style="rowStyle" align="center" stripe border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
            <el-table-column prop="name" align="center" label="标签名称"></el-table-column>
            <el-table-column prop="categoryName" align="center" label="分类名称"></el-table-column>
            <el-table-column align="center" label="操作">
            <!-- “scope”代表当前行的对象，可以通过它来获取当前行的某个属性值↓ -->
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 20, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
        <!-- 新增或编辑组件 -->
        <edit :title="edit.title" :dialogVisible="edit.visible" :categoryList="this.categoryList" :formData="edit.formData" :remoteClose="remoteClose"/>
    </div>
</template>

<script>
import api from '@/api/label'
import categoryApi from '@/api/category'
import Edit from './edit'
export default {
    name: 'Label', // ←注意：左边这项的值要和路由表中配置的“name”的值保持一致
    components:{Edit}, // ←注意：左边这项相当于ES5中的“Edit:Edit”
    data() {
        return {
            list:[], // ←左边这项表示“列表数据”
            query:{}, // ←左边这项表示“查询条件”
            page:{ // ←左边这项表示“分页对象”
                current:1, // ←左边这项表示“当前页码”
                size:20, // ←左边这项表示“每页显示的条数”
                total:0, // ←左边这项表示“总记录数”
            },
            categoryList:[], // ←左边这项表示“正常状态的分类”
            edit:{ // ←注意：左边这项表示“子组件引用的属性对象”
                title:'',
                visible:false,
                formData:{}
            }
        }
    },
    created() {
        this.fetchData()
        // 获取正常状态的分类列表数据
        this.getNormalList()
    },
    methods: {
        fetchData(){
            api.getList(this.query,this.page.current,this.page.size).then(response => {
                this.list = response.data.records
                this.page.total = response.data.total
            })
        },
        handleEdit(id){
            console.log('编辑',id)
            api.getById(id).then(response =>{
                if (response.code === 20000) {
                    this.edit.formData = response.data
                    // 弹出对话框
                    this.edit.visible = true
                    this.edit.title = '编辑'
                } else {
                    
                }
            })
        },
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('确认删除这条记录吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送删除请求
                api.deleteById(id).then(response => {
                    // 处理响应结果
                    this.$message({
                        type: response.code === 20000 ? 'success' : 'error',
                        message: response.message,
                        center:true,
                    });
                })
                // 刷新列表数据
                this.fetchData()
            }).catch(() => {
                // 点击“取消”按钮，取消删除。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        // 当每页显示的条数改变后触发此方法，“value”表示“切换之后每页显示的条数”↓
        handleSizeChange(value){
            this.page.size = value
            this.fetchData()
        },
        // 当页码改变后触发此方法，“value”表示“当前点击或输入的（即改变后的）那个页码”↓
        handleCurrentChange(value){
            this.page.current = value
            this.fetchData()
        },
        // 获取正常状态的分类列表数据
        getNormalList(){
            categoryApi.getNormalList().then(response => {
                this.categoryList = response.data
                console.log('this.categoryList',this.categoryList)
            })
        },
        // 条件查询
        queryData(){
            // 将页码变为“第1页”
            this.page.current = 1
            this.fetchData()
        },
        // 重置
        reload(){
            this.query = {}, // ←左边这一项表示“向‘this.query’传递空对象”
            this.fetchData()
        },
        // 打开“新增”对话框
        openDialogAndAdd(){
            // 打开对话框时重新查询正常状态的分类数据↓
            this.getNormalList() // ←注意：在此处调用此函数是为了能把上次（每次）新增的正常分类获取进来
            this.edit.visible = true
            this.edit.title = '新增'
        },
        // 子组件会触发此事件来关闭对话框
        remoteClose(){
            this.edit.formData = {}
            this.edit.visible = false
            this.fetchData() // ←注：如果关闭对话框后不想或无需刷新列表数据，则无需调用左边的这个方法
        },
        rowStyle(){
            return "text-align:center";
        },
    },
}
</script>

<style lang="scss" scoped>
    div{::v-deep.el-input__inner{text-align: center;}}
    .el-pagination , .el-select-dropdown__item {text-align: center;}
</style>